<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap{
          width: 80%;
          height: 5%;
          margin: 20px auto;
          position: relative;
        }
        #myvideo{
          width: 100%;
          height: 400px;
        }
        .seek{
          width: 400px;
        }
        .active{
          text-decoration: line-through;
          color: red;
        }
        .ad{
          width: 80%;
          height: 300px;
          position: absolute;
          left: 0;
          top:0;
          bottom: 0;
          right: 0;
          margin: auto;
          background: skyblue;
          font-size: 30px;
          display: none;
        }

    </style>
</head>
<body>
    <!-- src 音频的地址
        loop 循环播放
        muted 静音
        autoplay 自动播放
        controls 视频自带的控制栏
        poster  视频封面 -->
    <div class="wrap">
      <video id="myvideo" src="./1.mp4"    poster="https://img0.baidu.com/it/u=6459405,3393885958&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500">


      </video>
      <div>
        <button id="btnCtrl">播放</button>
        <!-- 最大值  视频的最大秒数  最小值0 -->
        <!-- 快进快退的 -->
        <input class="seek" step="0.1"  type="range" min="0" max=""  value="0" /> 
        <span id="minute">00</span>:<span id="seconds">00</span>
         音量：<button id="mute" >静</button> <input class="voice" step="0.1"  type="range" min="0" max="1"  value="0" /> 
        <button id="fullScreen">全屏</button>
        
      </div>
        <select  id="sel">
            <option value="1">1倍速</option>
            <option value="2">2倍速</option>
        </select>
      <div class="ad">
          一刀99999999 是兄弟就来砍我
      </div>
  </div>
    <script>
      window.onload=function(){
        // HTML5 新增的音频和视频  新增了一套api (接口 ，方法)
        // 视频对象
        //   属性 和 方法 和 事件
        var myvideo=document.getElementById("myvideo"); //视频对象
        console.log(myvideo)
      var btnCtrl=document.getElementById("btnCtrl");
      // 播放暂停
      btnCtrl.onclick=function(){
          // 点击按钮 如果是播放 就暂停  如果是暂停就播放
          if(this.innerHTML=="播放"){
              // 1.视频播放
              myvideo.play();
              this.innerHTML="暂停"

          }else{
            // 3.视频暂停
            myvideo.pause();
            this.innerHTML="播放";
          }
      }
        // 获取视频时长 赋值给 滑轨的最大值
        // 3.duration 视频时长
        var seek=document.querySelector(".seek");
        console.log( myvideo.duration)
        seek.max= myvideo.duration;

        // 快进 功能  收集到 当前的滑轨的值 赋值给视频的播放位置
        seek.oninput=function(){
            console.log(this.value) //滑轨的值
            // 4.currentTime 当前视频的播放位置
            myvideo.currentTime=this.value;
        }
      
        // 音量控制
        var voice=document.querySelector(".voice");
        voice.oninput=function(){
          // 音量的滑轨 收集到的值 是0-1 的值  赋值给视频对象的 音量属性
          console.log(this.value)
          
          // 5 volume	视频音量
          myvideo.volume=this.value;
        }
        // 静音
        // myvideo.muted --true 静音  false --未静音
        var mute=document.getElementById("mute")
        // 6. myvideo.muted 视频静音
        mute.onclick=function(){
          if(myvideo.muted){ //如果已经静音
            mute.classList.remove("active");
           myvideo.muted=false; //打开声音
          }else{
            mute.classList.add("active");
            myvideo.muted=true; //静音
          }
        }
        // 全屏
        var fullScreen=document.getElementById("fullScreen");
        fullScreen.onclick=function(){
          // 全屏方法
          // webkit 谷歌浏览器内核
          // Request 请求
          // FullScreen 全屏
          myvideo.webkitRequestFullScreen()
        }

        //让进度滑轨 跟着视频的播放时长运动
        // ontimeupdate 当播放位置更改时发生此事件。
        var min=0; //分
        var sec=0; //秒
        var minute=document.getElementById("minute");
        var seconds=document.getElementById("seconds");
        myvideo.ontimeupdate=function(){
            
            console.log(myvideo.currentTime)//当前播放位置
            var nowTime=myvideo.currentTime;//当前播放时长
            seek.value=nowTime;//让滑轨的value值 等于当前的播放位置
            // nowTime=169.33664 秒数
            // 换算成 多少分  多少秒
            min=Math.floor(nowTime/60);  //分
            sec=Math.floor(nowTime%60); //秒数
            minute.innerHTML=min<10?   '0'+min  :   min;
            seconds.innerHTML=sec<10? '0'+sec :  sec ;
        }
          // 暂停事件
          var ad=document.querySelector(".ad");
          myvideo.onpause=function(){
            // alert("视频暂停了")
            ad.style.display="block"; //显示广告
          }
          // 视频播放事件
          myvideo.onplay=function(){
            ad.style.display="none"; //隐藏广告
          }

        
    }
    //今日作业 
      // 今日知识点 属性，方法，事件 等手抄一遍
      //  今日课堂代码 敲一遍
      //  按照视频播放器 自制音频播放器

    </script>
</body>
</html>